<route lang="json5" type="page">
{
  layout: 'demo',
  style: {
    navigationBarTitleText: 'wot-固定表格1',
  },
}
</route>

<template>
  <view class="center pt-4 flex-col">
    <view>wot 表格1-固定第一列</view>
    <wd-button type="success">成功按钮</wd-button>
    <wd-table :data="dataList">
      <wd-table-col prop="name" label="品种" fixed></wd-table-col>
      <wd-table-col prop="price" label="价格" sortable></wd-table-col>
      <wd-table-col prop="chg" label="涨幅" sortable>
        <template #value="{ row }">
          <view class="custom-class">
            <text :style="{ color: row.chg <= 0 ? 'green' : 'red' }">{{ row.chg * 100 }}%</text>
          </view>
        </template>
      </wd-table-col>
      <wd-table-col prop="vol" label="成交量" sortable></wd-table-col>
      <wd-table-col prop="oi" label="持仓量" sortable></wd-table-col>
    </wd-table>
  </view>
</template>

<script lang="ts" setup>
import { useQueue, useMessage, useToast } from 'wot-design-uni'

const dataList = reactive([
  {
    id: 1,
    name: '菜粕加权',
    price: 2489,
    chg: 0.031,
    vol: 24559,
    oi: 28998,
  },
  {
    id: 2,
    name: '沪银加权',
    price: 2489,
    chg: -0.021,
    vol: 14559,
    oi: 2998,
  },
  {
    id: 3,
    name: '螺纹钢加权',
    price: 3390,
    chg: 0.015,
    vol: 20003,
    oi: 18998,
  },
])
</script>

<style lang="scss" scoped>
.custom-class {
  display: flex;
  align-items: center;
  width: 220rpx;
  height: 40rpx;
}
</style>
